<template>
  <div class="point-box">
    <el-dialog
      ref="dialog"
      append-to-body
      :close-on-click-modal="false"
      :title="formTitle"
      fullscreen
      :visible.sync="dialogShow"
      width="1040px"
    >
      <br />
      <div>
        <div class="manager_detail">
          <canvas id="canvas" ref="canvas" class="map" width="1000" height="700"></canvas>
        </div>
        <div style="color: red; position: absolute; top: 0">
          <div>111111111111111111111</div>
          <div>111111111111111111111</div>
          <div>111111111111111111111</div>
          <div>111111111111111111111</div>
          <div>111111111111111111111</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ycMapImg from "@/assets/images/yc.png";
export default {
  props: ["dialogShow", "formTitle"],
  components: {},
  watch: {},
  data() {
    return {
      ycMapImg,
      panning: false,
    };
  },
  methods: {
    initCanvas() {
      // 1. 实例化canvas 画布
      var canvas = new fabric.Canvas("canvas", {
        // perPixelTargetFind: true, //这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择
        // hasBorders: false,
      });
      console.log(canvas.add);
      let properties = {
        left: 20, // 左上角顶点横坐标20px
        top: 20, // 左上角顶点纵坐标20px
        fill: "#AFE164", // 填充颜色为#AFE164
        width: 60, // 宽度为60px
        height: 60, // 高度为60px
        objectCaching: false, // 对象缓存设为false
        stroke: "transparent", //边框线颜色为透明
        strokeWidth: 1, //边框线宽度设为1px
      };
      let rect = new fabric.Rect(properties);
      console.log(canvas.add);
      // 将矩形添加到画布上
      canvas.add(rect);

      // 将矩形添加到画布上
      console.log(require("./yc.png"));
      canvas.renderAll();
      // 2. 设置背景图片做为底图
      // canvas.setBackgroundImage(this.ycMapImg, canvas.renderAll.bind(canvas), {
      //   scaleX: canvas.width / 800,
      //   scaleY: canvas.height / 500,
      // });
      // fabric.Image.fromURL(ycMapImg, function (oImg) {
      //   oImg.scale(0.1).set({
      //     left: 400,
      //     top: 200,
      //     name: "point",
      //     hasBorders: false, //不显示选中时的边
      //     hasControls: false, //不显示选中时的9个方块
      //     lockMovementX: true,
      //     lockMovementY: true,
      //   });

      //   canvas.add(oImg);
      // });
      // fabric.Image.fromURL(ycMapImg, function (oImg) {
      //   oImg.scale(0.1).set({
      //     left: 600,
      //     top: 200,
      //     name: "point2",
      //     hasBorders: false, //不显示选中时的边
      //     hasControls: false, //不显示选中时的9个方块
      //     lockMovementX: true,
      //     lockMovementY: true,
      //   });
      //   canvas.add(oImg);
      // });
      // //鼠标按下事件
      // canvas.on("mouse:down", function (e) {
      //   console.log(e);
      //   this.panning = true;
      // });
      // //鼠标抬起事件
      // canvas.on("mouse:up", function (e) {
      //   this.panning = false;
      //   canvas.selectable = false;
      //   // alert(e.target.name)
      // });
      // // 移动画布事件
      // canvas.on("mouse:move", function (e) {
      //   if (this.panning && e && e.e) {
      //     var delta = new fabric.Point(e.e.movementX, e.e.movementY);
      //     canvas.relativePan(delta);
      //   }
      // });
      // // 鼠标滚动画布放大缩小
      // canvas.on("mouse:wheel", function (e) {
      //   var zoom = (e.e.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
      //   zoom = Math.max(0.8, zoom);
      //   //最小为原来的1/10
      //   zoom = Math.min(3, zoom);
      //   //最大是原来的3倍
      //   var zoomPoint = new fabric.Point(e.e.pageX, e.e.pageY);
      //   canvas.zoomToPoint(zoomPoint, zoom);
      // });
    },
  },
  created() {},
  mounted() {
    this.initCanvas();
  },
};
</script>
<style scoped>
.manager_detail {
  width: 100%;
  height: calc(100vh - 112px);
  overflow: hidden;
}
.map {
  border: 1px solid #898989;
}
</style>
